<template>
  <div style="width: 700; margin: 0 auto">
    <!-- <button class="printBtn" v-if="isPrint" @click="onPrint" type="primary"
      style="width: 150px;display: block; margin:0 auto;">打印</button> -->

    <div
      class=""
      style="display: flex; justify-content: center; align-items: center"
    >
      <el-checkbox v-model="companyPrint">公司存根</el-checkbox>
      <el-checkbox v-model="studentPrint">學生存根</el-checkbox>
      <el-button class="ml-[15px]" size="small" @click="onPrint"
        >打印</el-button
      >
    </div>

    <div
      v-for="(stubItem, stubIndex) in stubs"
      :key="stubIndex"
      id="pdfDom"
      class="tableCenter textCenter"
      style="background-color: #ffffff"
    >
      <!-- <div class="textSmallNormal printHide">
        <br>
        <input type="checkbox" name="PRINT_COPY1" value="1" onclick="ChangePrintOption();" checked="checked">公司存根&nbsp;&nbsp;&nbsp;
        <input type="checkbox" name="PRINT_COPY2" value="1" onclick="ChangePrintOption();">學生存根&nbsp;&nbsp;&nbsp;
        <input class="buttonForm" type="button" value="列印" onclick="window.print();"><br>
        <br>
      </div> -->
      <div class="tableCenter">
        <table
          class="tableCenter w100p noBorder"
          cellpadding="0"
          cellspacing="0"
          style="text-align: left"
        >
          <tbody>
            <tr>
              <td class="printHugeBoldNormal" width="210">
                <img
                  src="../../../../image/logo.png"
                  alt=""
                  border="0"
                />
              </td>

              <td class="printLargeBoldNormal textRight">收款</td>
            </tr>
            <tr>
              <td class="printSmallNormal" colspan="2">
                分校&nbsp;:&nbsp;{{
                  formData.school.name
                }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <!-- 電話&nbsp;:&nbsp;{{formData.student_name}} -->
              </td>
            </tr>
            <tr>
              <td class="printSmallNormal" colspan="2">
                地址&nbsp;:&nbsp;{{ formData.school.name }}
              </td>
            </tr>
          </tbody>
        </table>
        <br />
        <table
          class="tableCenter w100p noBorder"
          cellpadding="2"
          cellspacing="0"
          style="text-align: left"
        >
          <colgroup>
            <col width="12%" />
            <col width="37%" />
            <col width="2%" />
            <col width="12%" />
            <col width="37%" />
          </colgroup>
          <tbody>
            <tr>
              <td class="printSmallNormal">編號&nbsp;:</td>
              <td class="printSmallNormal borderBottom1dot">
                <span class="">({{ formData.number }})</span>(重印)
              </td>
              <td class="printSmallNormal">&nbsp;</td>
              <td class="printSmallNormal">日期&nbsp;:</td>
              <td class="printSmallNormal borderBottom1dot">{{ formData.create_time }}</td>
              <!-- 27<sup>th</sup> October 2020 -->
            </tr>
            <tr>
              <td class="printSmallNormal">學生&nbsp;:</td>
              <td class="printSmallNormal borderBottom1dot">
                {{ formData.student_name }}
              </td>
              <!-- (STD000827)-->
              <td class="printSmallNormal">&nbsp;</td>
              <td class="printSmallNormal">員工&nbsp;:</td>
              <td class="printSmallNormal borderBottom1dot">
                {{ formData.username}}
              </td>
            </tr>
            <tr>
              <td class="printSmallNormal">列印&nbsp;:</td>
              <td class="printSmallNormal borderBottom1dot">
                {{formData.username }}
              </td>
              <td class="printSmallNormal">&nbsp;</td>
              <td class="printSmallNormal">收款日期&nbsp;</td>
              <td class="printSmallNormal borderBottom1dot">{{ formData.create_time }}</td>
            </tr>
            <tr>
              <td class="printSmallNormal">銷售員&nbsp;:</td>
              <td class="printSmallNormal borderBottom1dot">
                {{formData.username }}
              </td>
              <td class="printSmallNormal">&nbsp;</td>
              <td class="printSmallNormal">&nbsp;</td>
              <td class="printSmallNormal">&nbsp;</td>
            </tr>
          </tbody>
        </table>
        <br />

        <table
          class="tableCenter w100p noBorder collapse"
          cellpadding="2"
          cellspacing="0"
        >
          <colgroup>
            <col width="5%" />
            <!-- Item -->
            <col width="8%" />
            <!-- type -->
            <col width="12%" />
            <!-- type -->
            <col width="12%" />
            <!-- Course / Product -->
            <col width="22%" />
            <!-- Invoice -->
            <col width="9%" />
            <!-- number -->
            <col width="8%" />
            <!-- B/F -->
            <col width="8%" />
            <!-- Amount -->
            <col width="8%" />
            <!-- Remain -->
            <col width="8%" />
            <!-- Remain -->
          </colgroup>
          <tbody>
            <tr>
              <td class="printSmallNormal textLeft vTop borderBottom1">項目</td>
              <td class="printSmallNormal textLeft vTop borderBottom1">類型</td>
              <td class="printSmallNormal textLeft vTop borderBottom1">
                產品編號
              </td>
              <td class="printSmallNormal textLeft vTop borderBottom1">
                課程 / 產品 / 套票
              </td>
              <td class="printSmallNormal textLeft vTop borderBottom1">
                課堂數量
              </td>
              <td class="printSmallNormal textLeft vTop borderBottom1">
                發票金額
              </td>
              <td class="printSmallNormal textLeft vTop borderBottom1">
                付款金額
              </td>
              <td class="printSmallNormal textLeft vTop borderBottom1">
                累積總付
              </td>
              <td class="printSmallNormal textLeft vTop borderBottom1">
                現時尚欠
              </td>
            </tr>
          </tbody>
        </table>
        <br />

        <table
          v-for="(item, index) in wrapList"
          :key="'a' + index"
          class="tableCenter w100p noBorder collapse"
          cellpadding="2"
          cellspacing="0"
        >
          <colgroup>
            <col width="5%" />
            <!-- Item -->
            <col width="8%" />
            <!-- type -->
            <col width="12%" />
            <!-- type -->
            <col width="12%" />
            <!-- Course / Product -->
            <col width="22%" />
            <!-- Invoice -->
            <col width="9%" />
            <!-- number -->
            <col width="8%" />
            <!-- B/F -->
            <col width="8%" />
            <!-- Amount -->
            <col width="8%" />
            <!-- Remain -->
            <col width="8%" />
            <!-- Remain -->
          </colgroup>
          <tbody>
            <tr>
              <td class="printSmallNormal textLeft vTop">{{ index + 1 }}</td>
              <td class="printSmallNormal textLeft vTop">
                {{ item.type_name  }}
              </td>
              <td class="printSmallNormal textLeft vTop">{{ item.number }}</td>
              <td class="printSmallNormal textLeft vTop">
                {{ item.name }}
              </td>
              <td class="printSmallNormal textLeft vTop">
                {{ item.num }}
              </td>
              <td class="printSmallNormal textLeft vTop">
                ${{ item.price }}
              </td>
              <td class="printSmallNormal textLeft vTop">${{ item.money }}</td>
              <td class="printSmallNormal textLeft vTop">
                ${{ item.grandtotal }}
              </td>
              <td class="printSmallNormal textLeft vTop">
                ${{ item.debt }}
              </td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td colspan="7">
                <table
                  class="noBorder collapse"
                  cellpadding="2"
                  cellspacing="0"
                >
                  <colgroup>
                    <col width="120" />
                    <col width="90" />
                    <col width="90" />
                    <col width="90" />
                    <col width="110" />
                    <col width="90" />
                  </colgroup>
                </table>
              </td>
            </tr>
          </tbody>
        </table>

        <table
          class="tableCenter w100p noBorder collapse"
          cellpadding="2"
          cellspacing="0"
          style="text-align: left"
        >
          <colgroup>
            <col width="59%" />
            <col width="9%" />
            <!-- number -->
            <col width="8%" />
            <!-- B/F -->
            <col width="8%" />
            <!-- Amount -->
            <col width="8%" />
            <!-- Remain -->
            <col width="8%" />
          </colgroup>
          <tbody>
            <tr>
              <td class="printSmallNormal borderTop1">
                付款方式&nbsp;:&nbsp;{{
                  formData.paytype.name
                }}&nbsp;&nbsp;&nbsp;參考編號&nbsp;:&nbsp;{{
                 formData.number
                }}
              </td>
              <td class="printSmallNormal textLeft borderTop1">總計&nbsp;:</td>
              <td class="printSmallNormal textLeft borderTop1">
                ${{ all_price }}
              </td>
              <td class="printSmallNormal textLeft borderTop1">
                ${{ all_money }}
              </td>
              <td class="printSmallNormal textLeft borderTop1">
                ${{ all_grandtotal}}
              </td>
              <td class="printSmallNormal textLeft borderTop1">
                ${{ all_debt }}
              </td>
            </tr>
          </tbody>
        </table>
        <br />
        <table
          class="tableCenter w100p noBorder"
          cellpadding="0"
          cellspacing="0"
        >
          <colgroup>
            <col width="80%" />
            <col width="20%" />
          </colgroup>
          <tbody>
            <tr>
              <td class=""></td>
              <td class="vTop">
                <table class="w100p noBorder" cellpadding="2" cellspacing="0">
                  <tbody>
                    <tr class="h70">
                      <td class="printSmallNormal textCenter borderBottom1">
                        &nbsp;
                      </td>
                    </tr>
                    <tr>
                      <td class="printSmallNormal textCenter">公司蓋章</td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <td class="textLeft spaces" colspan="2">
                備注：{{ formData.remark }}
              </td>
            </tr>
          </tbody>
        </table>
        <br />

        <table
          class="tableCenter w100p noBorder"
          cellpadding="2"
          cellspacing="0"
          style="text-align: left"
        >
          <tbody>
            <tr>
              <td class="printSmallNormal textLeft spaces">
                {{ formData.notice }}
              </td>
            </tr>
          </tbody>
        </table>
        <br />
        <table
          class="tableCenter w100p noBorder"
          cellpadding="0"
          cellspacing="0"
        >
          <tbody>
            <tr>
              <!-- <td class="printLittleNormal textCenter">系統提供 : </td> -->
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from "vue";
import { useRoute } from "vue-router";

const companyPrint = ref(true);
const studentPrint = ref(true);

const stubs = computed(() => {
  const arr = [];
  if (companyPrint.value) {
    arr.push({
      stubName: "公司存根",
    });
  }
  if (studentPrint.value) {
    arr.push({
      stubName: "學生存根",
    });
  }
  console.log(arr);
  return arr;
});

const route = useRoute();
console.log(route);
const formData = ref(JSON.parse(route.query.data));
console.log(formData.value);
if (formData.value.course.length>0) {
  formData.value.course.map(e=>e.type_name = '課程')
}
if (formData.value.product.length>0) {
  formData.value.product.map(e=>e.type_name = '產品')
}
if (formData.value.products_group.length>0) {
  formData.value.products_group.map(e=>e.type_name = '產品組合')
}
if (formData.value.ticket.length>0) {
  formData.value.ticket.map(e=>e.type_name = '套票')
}
const wrapList = ref([]);
wrapList.value = [
  ...wrapList.value,
  ...formData.value.course,
  ...formData.value.product,
  ...formData.value.products_group,
  ...formData.value.ticket,
];
const all_price = ref(0)
const all_money = ref(0)
const all_grandtotal = ref(0)
const all_debt = ref(0)
wrapList.value.map(e=>{
  all_price.value += Number(e.price)
  all_money.value += e.money*1
  all_grandtotal.value += e.grandtotal*1
  all_debt.value += e.debt*1
})
const onPrint = () => {
  setTimeout(() => {
    window.print();
  }, 200);
};
</script>

<style lang='less'  scoped>
#pdfDom {
  /* display: inline-block; */
  /* position: fixed; */
  padding: 20px;
  font-size: 12px;
  overflow: hidden;
  border-bottom: 2px solid #000;
  z-index: 555;
}
.formButton {
  width: 60px;
}
* {
  font-family: "微軟正黑體", "Microsoft JhengHei", Arial, "Helvetica Neue",
    Helvetica, sans-serif;
  color: #000000;
}

.textCenter {
  text-align: center;
}
.tableCenter {
  margin: 0 auto;
}
.w100p {
  width: 100%;
}
.noBorder {
  border: 0;
}
.printHugeBoldNormal {
  font-family: Arial;
  font-size: 16pt;
  font-weight: bold;
}
.printLargeBoldNormal {
  font-family: Arial;
  font-size: 12pt;
  font-weight: bold;
}
.textRight {
  text-align: right;
}
.printSmallNormal {
  font-family: Arial;
  font-size: 8pt;
}
.borderBottom1dot {
  border-bottom: 1px dotted #cccccc;
}
.floatRight {
  float: right;
}
table.collapse {
  border-collapse: collapse;
}
.textLeft {
  text-align: left;
}
.vTop {
  vertical-align: top;
}
.borderTop1 {
  border-top: 1px solid black;
}
.borderBottom1 {
  border-bottom: 1px solid black;
}
.spaces {
  white-space: break-spaces;
}
</style>